<template>
  <SuperTable ref="superTableRef" search pager border align="center" header-title="三方系统" :columns="columns"
    :data-request="fetchData" :export-config="{}">
  </SuperTable>
  <a-drawer title="移库详情页" v-model:visible="visible" class="custom-class" style="" width="80%" placement="right">
    <div id="print-block">
      <h1 style="display: flex; width: 100%; justify-content: center; font-size: 24px; font-width: 700">移库单</h1>
      <a-row style="font-size: 15px; font-width: 700;margin-bottom: 10px;">
        <a-col :span="8"> 移库单号 : {{ formState.batchNo }} </a-col>
        <a-col :span="8"> 移库人 : {{ formState.stockUserName }} </a-col>
        <a-col :span="8"> 移库日期 : {{ formState.createTime }}</a-col>
      </a-row>
      <vxe-table :export-config="{}" ref="tableRef" style="width: 100%; overflow-y: visible" border max-height="450"
        :data="tableData" align="center">
        <vxe-column type="seq" title="序号" width="100"></vxe-column>
        <vxe-column field="serial" title="冻存盒编号" width="200"></vxe-column>
        <vxe-column field="projectName" title="课题组" width="150"></vxe-column>
        <vxe-column field="originalStorageDesp" title="原始存储位置"></vxe-column>
        <vxe-column field="storageDesp" title="目标存储位置"></vxe-column>
      </vxe-table>
    </div>
    <div style="display: flex; justify-content: center; background-color: #fff; margin: 20px 0">
      <Popconfirm title="是否确认导出？" @confirm="exportExcelFn">
        <Button type="primary">Excel导出</Button>
      </Popconfirm>
      <a-button style="margin-left: 20px" type="primary" @click="print">打印</a-button>
    </div>
  </a-drawer>
</template>

<script setup lang="tsx">
import SuperTable from '@/framework/components/core/super-table/super-table.vue';
import { baseColumns } from './columns';
import { ref } from 'vue';
import { Button, Popconfirm } from 'ant-design-vue';
import { moveList, journalShow } from '@/modules/Sample-transfer/api/index';
import Print from 'print-js';
const superTableRef = ref<InstanceType<typeof SuperTable>>();
const visible = ref(false)
const tableRef = ref()
const columns = [
  ...baseColumns,
  {
    title: '操作',
    field: '$action',
    hideInSearch: true,
    align: 'center',
    fixed: 'right',
    width: 200,
    actions: ({ row }) => [
      {
        label: '查看',
        onClick: async () => {
          formState.value.batchNo = row.batchNo
          formState.value.stockUserName = row.stockUserName
          formState.value.createTime = row.createTime
          let { result } = await journalShow(row.id)
          tableData.value = result.details
          visible.value = true
        },
      },
    ],
  },
];
const formState = ref({
  batchNo: '',
  stockUserName: '',
  createTime: '',
})
const tableData = ref([])
const fetchData = async (ori) => {
  let data = superTableRef.value?.getFormModel();
  let params = {
    pageSize: ori.page.pageSize,
    pageNum: ori.page.currentPage,
    data,
  };
  data?.createTime ? (params.createTimeBtw = `${data?.createTime[0]},${data?.createTime[1]}' 23:59:59'`) : ''

  let { result } = await moveList(params);
  return result;
};
const exportExcelFn = () => {
  tableRef.value?.openExport();
};
const print = () => {
  Print({
    printable: 'print-block',
    type: 'html',
    header: '移库单',
    headerStyle: 'font-weight:400;text-align:center;margin:50px 0',
    maxWidth: 1500,
    targetStyles: ['*'], // 允许打印所有样式属性
  });
};
</script>

<style scoped lang="less"></style>
